<template>
	<div class="">
		<!--<base-header></base-header>-->
		<!--评论列表-->
		<loading v-if="isloading"></loading>
		<ul class="">
			<li class="comment-li" v-for="comment in comment_list">
				<header class="text-left">
					<span class="comment-time">{{comment.created_at}}</span>
				</header>
				<div class="comment-my">{{comment.content}}</div>
				<div class="comment-main">
					{{comment.article_title}}
				</div>
			</li>
			<no-msg v-if="noMsg"></no-msg>
		</ul>
	</div>
</template>

<script>
	import { formatDate } from '@/util/date'
	import NoMsg from "@/components/common/NoMsg"
	import Loading from "@/components/common/Loading"
	import BaseHeader from "@/components/common/BaseHeader"
	export default {
		name: 'UserComment',
		components: {
			BaseHeader,
			NoMsg,
			Loading
		},
		filters: {
			//时间格式过滤器
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'MM-dd  hh:mm')
			}
		},
		data() {
			return {
				uid: '',
				token: '',
				page: '1',
				comment_list: [],
				t: [],
				noMsg: false,
				isloading: true
			}
		},
		mounted() {
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			this.getList();
			var self = this;
			//为窗口的scroll事件绑定处理函数 
			$(window).scroll(function() {
				if($(document).scrollTop() >= $(document).height() - $(window).height()) {
					//alert("滚动条已经到达底部为" + $(document).scrollTop());
					self.page++;
					if(self.page < self.page_count) {
						self.getList();
					} else {
						return 'noMore';
					}
				}
			});
		},
		methods: {
			//用户评论列表
			getList() {
				var self = this;
				var data = {
					uid: self.uid,
					token: self.token,
					page: self.page
				};
				$.post(global.domain + global.API.user_mycomment, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.t = msg.data;
						for(var i = 0; i < self.t.length; i++) {
							self.comment_list.push(self.t[i]);
						};
						self.page_count = msg.page_count;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
						if(msg.data.length > 0) {
							self.noMsg = false;
						} else {
							self.noMsg = true;
						}
					} else {
						self.noMsg = true;
						console.log(msg.error);
						if(msg.is_auth == 0) {
							localStorage.clear();
							self.$router.push({
								path: '/login'
							});
						}
					}
				}, 'json');
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/article.css";
	.comment-li {
		background-color: #FFFFFF;
		margin-bottom: 12px;
		padding: 20px;
	}
	
	.comment-main {
		margin: 0;
		padding: 12px 10px;
	}
	
	.noMsg {
		margin-top: 100px;
	}
</style>